<template>
  <div class="latex-editor">
    <div class="container">
      <div class="left">
        <div class="input-area" @click="inputFocus">
          <TextArea
            ref="textAreaRef"
            v-model="latex"
            :value="latex"
            placeholder="输入 LaTeX 公式"
            @update:value="latex = $event"
          />
        </div>
        <div class="preview">
          <div v-if="!latex" class="placeholder">公式预览</div>
          <div v-else class="preview-content">
            <FormulaContent :width="518" :height="138" :latex="latex" />
          </div>
        </div>
      </div>
      <div class="right">
        <Tabs v-model="toolbarState" :tabs="tabs" card @update:value="toolbarState = $event" />
        <div class="content">
          <div v-if="toolbarState === 'symbol'" class="symbol">
            <Tabs
              v-model="selectedSymbolKey"
              :tabs="symbolTabs"
              space-between
              :tabs-style="{ margin: '10px 10px 0' }"
              @update:value="selectedSymbolKey = $event"
            />
            <div class="symbol-pool">
              <div
                v-for="item in symbolPool"
                :key="item.latex"
                class="symbol-item"
                @touchstart.prevent="insertSymbol(item.latex)"
                @click.stop="insertSymbol(item.latex)"
              >
                <SymbolContent :latex="item.latex" />
              </div>
            </div>
          </div>
          <div v-if="toolbarState === 'formula'" class="formula">
            <div v-for="item in formulaList" :key="item.label" class="formula-item">
              <div class="formula-title">{{ item.label }}</div>
              <div
                class="formula-item-content"
                @touchstart.prevent="insertSymbol(item.latex)"
                @click.stop="insertSymbol(item.latex)"
              >
                <FormulaContent :width="236" :height="60" :latex="item.latex" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FORMULA_LIST, SYMBOL_LIST } from './config/latex';

import FormulaContent from './FormulaContent.vue';
import SymbolContent from './SymbolContent.vue';

import TextArea from './components/TextArea.vue';
import Tabs from './components/Tabs.vue';

const tabs = [
  { label: '常用符号', key: 'symbol' },
  { label: '预置公式', key: 'formula' },
];

const formulaList = FORMULA_LIST;

const symbolTabs = SYMBOL_LIST.map((item) => ({
  label: item.label,
  key: item.type,
}));

export default {
  components: { TextArea, Tabs, SymbolContent, FormulaContent },
  data() {
    return {
      tabs,
      formulaList,
      symbolTabs,
      toolbarState: 'symbol',
      latex: '',
      selectedSymbolKey: SYMBOL_LIST[0].type,
    };
  },
  computed: {
    symbolPool() {
      const selectedSymbol = SYMBOL_LIST.find((item) => item.type === this.selectedSymbolKey);
      return selectedSymbol?.children || [];
    },
  },
  methods: {
    insertSymbol(latex) {
      if (!this.$refs.textAreaRef) return;
      this.$refs.textAreaRef.focus();
      document.execCommand('insertText', false, latex);
    },
    inputFocus() {
      if (!this.$refs.textAreaRef) return;
      this.$refs.textAreaRef.focus();
    },
    insertFormula(latex) {
      this.latex = latex;
    },
  },
};
</script>

<style lang="scss" scoped>
.latex-editor {
  height: 32.5em; // 500px
  cursor: pointer;
  padding: 0 0.2em;
  box-sizing: border-box;
  overflow: hidden;
}
.container {
  height: 100%;
  display: flex;
}
.left {
  width: 36em; // 540px
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.input-area {
  flex: 1;

  textarea {
    height: 100% !important;
    // border-color: #eee !important;
    border: 0;
    padding: 0.667em !important; // 10px

    &:focus {
      box-shadow: none !important;
    }
  }
}
.preview {
  height: 10.67em; // 160px
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 1.33em; // 20px
  border: 0.067em solid #eee; // 1px
  user-select: none;
}
.placeholder {
  color: #888;
  font-size: 0.867em; // 13px
}
.preview-content {
  width: 100%;
  height: 100%;
  padding: 0.667em; // 10px
  display: flex;
  justify-content: center;
  align-items: center;
}
.right {
  width: 18em; // 280px
  height: 100%;
  margin-left: 0.66em; // 20px
  background-color: #fff;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.content {
  height: calc(100% - 2.67em); // 40px
  font-size: 0.867em; // 13px
}
.formula {
  height: 100%;
  padding: 0.8em; // 12px

  overflow: auto !important;
  overflow: overlay;
}
.formula::-webkit-scrollbar {
  width: 0.33em !important; // 5px
  height: 0.33em !important; // 5px
  background-color: transparent !important;
}
.formula::-webkit-scrollbar-thumb {
  background-color: #c1c1c1 !important;
}
.formula-item {
  & + .formula-item {
    margin-top: 0.67em; // 10px
  }

  .formula-title {
    margin-bottom: 0.33em; // 5px
  }
  .formula-item-content {
    height: 4em; // 60px
    padding: 0.33em; // 5px
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    cursor: pointer;
  }
}
.symbol {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.symbol-pool {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0.8em; // 12px

  overflow: auto !important;
  overflow: overlay;
}
.symbol-pool::-webkit-scrollbar {
  width: 0.33em !important; // 5px
  height: 0.33em !important; // 5px
  background-color: transparent !important;
}
.symbol-pool::-webkit-scrollbar-thumb {
  background-color: #c1c1c1 !important;
}
.symbol-item {
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: #f9f9f9;
    cursor: pointer;
  }
}
.footer {
  height: 3.33em; // 50px
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  .btn {
    margin-left: 0.67em; // 10px
  }
}
</style>
